<template>
    <div>
        <div ref="saveRef">定义refs</div>
    </div>
</template>
  
<script setup>
// 组件引用后直接可以用 无需注册
// import tablePaging from '@/views/common/component/table-paging'
// import {
//     onBeforeMount, onMounted, updated, beforeDestroyed, destroyed,
//     computed, reactive, ref, toRefs, provide, inject, getCurrentInstance
// } from 'vue'
// import { useRouter, useRoute } from 'vue-router'
// import useUserStore from "@/store/modules/user";
// // 获取父级元素
// const CurrentInstance = getCurrentInstance()
// // 模块使用状态管理 pinia
// const userStore = useUserStore();
// // 生命周期
// onBeforeMount(() => { console.log('before mount') })
// onMounted(() => { console.log('on mounted') })
// updated(() => { console.log('updated') })
// beforeDestroyed(() => { console.log('beforeDestroyed') })
// destroyed(() => { console.log('destroyed') })
// // 定义响应式数据
// const reactiveValue = reactive([])// reactive一般定义数组或对象
// const refValue = ref('ref定义')// ref一般定义非数组或对象
// const saveRef = ref('ref定义')//saveRef 可获取模板ref的dom
// // 路由useRouter == $router  useRoute == $route
// const router = useRouter()
// const goHome = () => { router.push({ path: '/', query: { id: 99 } }) }
// // 获取动态路由参数
// const route = useRoute()
// const id = route.params.id
// //provide 跨层传递数据
// const sendData = '跨层传递数据'
// provide('sendData', sendData)
// // inject 跨层接收数据
// const getData = inject('getData')
// // defineProps 接收组件参数 == props
// const props = defineProps({
//     tableItem: { default: function () { return {} } },
// })
// /*defineEmits == $emit*/
// const emit = defineEmits(['clickEmit'])
// const clickThis = () => {
//     emit('clickEmit', 2)
// }

// // 计算属性
// const list = ref([1, 2, 3, 4, 5])
// const filterList = computed(() => {
//     return list.value.filter(item => item > 3)
// })
// // 监听属性
// // 返回你想要监听的响应式属性(ref产生的对象必须加.value)
// watch(() => { return age.value }, () => {
//     // 数据变化之后的回调函数
//     console.log('age发生了变化')
// }, { immediate: true, deep: false })

</script>
  
<style></style>